import React from 'react';
import { DATA_ENTRY, AdvancedSearch, ModalC, codeType, FirstHeaderC, SecondHeaderC } from '../../comps';
import { PrimaryC, PrimaryGhostC } from '../../comps';
import moment from 'moment';

class AdvanceSearchDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selInit1: undefined,
      loading: true,
      selInit2: undefined,
      // comDate: { type: '0', beginDate:moment('2020-01-01'), endDate:moment('2020-09-01')},
      // hasDataBD: moment('2018-05-05'),
      // hasDataED: moment('2020-01-23'),
      comDate: undefined,
      hasDataBD: undefined,
      hasDataED: undefined,
      disabled: false,
      dataRange: undefined,
    };

    setTimeout(() => {
      this.setState({
        selInit1: [
          { value: '1', title: '下拉选择1' },
          { value: '2', title: '下拉选择2' },
          { value: '3', title: '下拉选择3' },
        ],
        loading: false,
        selInit2: [
          { value: '1', title: '下拉选择1', children: [{ value: '11', title: 'dddd' }] },
          { value: '2', title: '下拉选择2' },
          { value: '3', title: '下拉选择3' },
        ],
        comDate: { type: '0', beginDate: moment('2020-01-01'), endDate: moment('2020-09-01') },
        hasDataBD: moment('2018-05-05'),
        hasDataED: moment('2020-01-23'),
        dataRange: [moment('2020-01-01'), moment('2020-09-01')],
      });
    }, 3000);
  }

  onQuery = (e) => {
    console.log(e);
    this.setState({});
    this.INPUTNUMBER.setNumber(5);
  };

  setref = (ref) => {
    this.setState({ RANGEDATE: ref }, () => {
      console.log('lal', this.state.RANGEDATE);
      return this.state.RANGEDATE;
    });
    return ref;
  };
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='测试占位' topHeight={true} />
        <SecondHeaderC title='1600展示9个字，1800展示10个字，1920展示8个字，分辨率越大，展示的字数越多' />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: '一二三四五六七八九十一二三四五', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: '一二三四五六七八九十一二三四五', type: DATA_ENTRY.INPUT },
          ]}
        />

        <AdvancedSearch
          dataSource={[
            {
              dataIndex: 'ad1',
              title: '组合组合',
              type: DATA_ENTRY.PRODUCTGROUPTREE,
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'ad2',
              title: '产品产品产',
              type: DATA_ENTRY.PRODUCTLIST,
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'ad3',
              helper: '1111',
              type: DATA_ENTRY.PRODUCTGROUPTREE,
              disabled: this.state.disabled,
              multiple: false,
            },
            {
              dataIndex: 'ad4',
              type: DATA_ENTRY.PRODUCTLIST,
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'ad5',
              type: DATA_ENTRY.PRODUCTLIST,
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'ad6',
              codeType: codeType.etf,
              type: DATA_ENTRY.SECURITIESCODE,
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'input1',
              title: '输入框',
              type: DATA_ENTRY.INPUT,
              disabled: this.state.disabled,
              suffix: '股咕咕咕咕咕咕',
              initialValue: '123',
              // disabled: true
            },
            {
              form: this.props.form,
              dataIndex: 'input132423',
              title: 'Win债券类型',
              type: DATA_ENTRY.WINBONDTYPE,
              initialValue: ['a101020400'],
            },

            {
              dataIndex: 'input2',
              title: '数字输入',
              type: DATA_ENTRY.INPUTNUMBER,
              disabled: this.state.disabled,
              unit: '元',
              splitStyle: true,
              initialValue: 123,
              rules: [{ required: true, message: '请输入数字!' }],
              onRef: (ref) => (this.INPUTNUMBER = ref),
            },
            {
              dataIndex: 'input3',
              title: '数字输入',
              type: DATA_ENTRY.INPUTNUMBER,
              unit: '万元',
              disabled: true,
            },
            {
              dataIndex: 'input4',
              title: '默认数字输入',
              type: DATA_ENTRY.INPUTNUMBER,
            },
            {
              dataIndex: 'input5',
              title: '数字(带精度)',
              precision: 2,
              type: DATA_ENTRY.INPUTNUMBER,
            },
            {
              dataIndex: 'input6',
              title: '数字输入',
              type: DATA_ENTRY.INPUTNUMBER,
              splitStyle: true,
              precision: 6,
              initialValue: 1234567.3324,
            },
            {
              dataIndex: 'select1',
              title: '下拉选择',
              type: DATA_ENTRY.SELECT,
              dataSource: this.state.selInit1,
              loading: this.state.loading,
              // isMultiple: true,
              allowClear: true,
              onChange: (e) => console.log(e),
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'select2',
              title: '树形下拉',
              type: DATA_ENTRY.TREESELECT,
              dataSource: this.state.selInit2,
              loading: this.state.loading,
              isMultiple: true,
              allowClear: true,
              onChange: (e) => console.log(e),
              disabled: this.state.disabled,
            },
            {
              selectIndex: 'complextdate1',
              startIndex: 'begin1',
              endIndex: 'end1',
              title: '日期区间',
              type: DATA_ENTRY.COMPLEXDATE,
              initialValue: this.state.comDate,
              hasDataBD: this.state.hasDataBD,
              hasDataED: this.state.hasDataED,
              selOnChange: this.selOnChange,
              startOnChange: (e) => console.log(e),
              endOnChange: (e) => console.log(e),
              onRef: (ref) => (this.COMPLEXDATE = ref),
              disabled: this.state.disabled,
            },
            {
              dataIndex: 'date1',
              title: '时间选择1',
              type: DATA_ENTRY.SINGLEDATE,
              disableBegin: moment('2020-10-10'),
              disableEnd: moment('2020-11-05'),
              initialValue: moment('2020-11-01'),
              onChange: (e) => console.log(e),
            },
            {
              dataIndex: ['endDate', 'beginDate'],
              title: '日期区间',
              type: DATA_ENTRY.RANGEDATE,
              initialValue: [moment().subtract(1, 'year'), moment().subtract(5, 'day')],
              hasDataED: moment().subtract(1, 'day'),
              onRef: (ref) => {
                this.RANGEDATE = ref;
              },
            },
            {
              dataIndex: ['beginDate1', 'endDate1'],
              title: '日期区间',
              type: DATA_ENTRY.RANGEDATE,
              initialValue: [moment().add(0, 'day'), moment().add(1, 'year').subtract(1, 'day')],
              hasDataBD: moment().add(0, 'day'),
              disableFuture: false,
              onRef: (ref) => {
                this.RANGEDATE = ref;
              },
            },
            {
              dataIndex: 'rateRange',
              title: '评级区间',
              type: DATA_ENTRY.RATERANGEC,
              dataRange: ['AA+', 'BB'],
            },
          ]}
          onQuery={this.onQuery}
        />
        <br />
        <div>
          <AdvancedSearch
            dataSource={[
              {
                dataIndex: 'portfolioId',
                title: '组合名称',
                type: DATA_ENTRY.SELECT,
                // dataSource: this.state.selInit1,
              },
              {
                dataIndex: 'shortName',
                title: '交易对手短名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'longName',
                title: '交易对手长名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'status',
                title: '可以用状态',
                type: DATA_ENTRY.SELECT,
                isMultiple: true,
                // dataSource: this.state.selInit2,
              },
              {
                dataIndex: 'trueFalse',
                title: '是否组件',
                type: DATA_ENTRY.SELECT,
                isTrueFalseJudge: true,
              },
              {
                dataIndex: ['pro', 'tenant'],
                // title: [],
                type: DATA_ENTRY.TENANTDEPARTMENT,
              },
            ]}
          />
        </div>
        <br />
        <br />
        <div>
          <AdvancedSearch
            dataSource={[
              {
                dataIndex: 'select2',
                title: '树形下拉',
                type: DATA_ENTRY.TREESELECT,
                dataSource: this.state.selInit2,
                loading: this.state.loading,
                isMultiple: true,
                allowClear: true,
                onChange: (e) => console.log(e),
                disabled: this.state.disabled,
              },
              {
                dataIndex: ['beginDate1', 'endDate1'],
                title: '日期区间',
                type: DATA_ENTRY.RANGEDATE,
                initialValue: [moment().add(0, 'day'), moment().add(1, 'year').subtract(1, 'day')],
                hasDataBD: moment().add(0, 'day'),
                disableFuture: false,
                onRef: (ref) => {
                  this.RANGEDATE = ref;
                },
              },
              {
                dataIndex: 'id1',
                title: '组合名称',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'input1',
                title: '输入框',
                type: DATA_ENTRY.INPUT,
                disabled: this.state.disabled,
                suffix: '股咕咕咕咕咕咕',
                initialValue: '123',
                // disabled: true
              },
              {
                dataIndex: 'input2',
                title: '数字输入',
                type: DATA_ENTRY.INPUTNUMBER,
                disabled: this.state.disabled,
                unit: '元',
                splitStyle: true,
                initialValue: 123,
                rules: [{ required: true, message: '请输入数字!' }],
                onRef: (ref) => (this.INPUTNUMBER = ref),
              },
              {
                dataIndex: 'input3',
                title: '数字输入',
                type: DATA_ENTRY.INPUTNUMBER,
                unit: '万元',
                disabled: true,
              },
            ]}
            allowClear={false}
            allowQuery={false}
            selfButt={<PrimaryGhostC title='刷新' onClick={() => console.log('刷新')} />}
          />
        </div>
        <br />
        <br />
        <div>
          <AdvancedSearch
            dataSource={[
              {
                dataIndex: 'id1',
                title: '组合名称',
                type: DATA_ENTRY.INPUT,
              },
            ]}
            allowClear={false}
            allowQuery={false}
            selfButt={<PrimaryGhostC title='刷新' onClick={() => console.log('刷新')} />}
          />
        </div>
        <br />
        <br />
        <div>
          <AdvancedSearch
            dataSource={[
              {
                dataIndex: 'tenant',
                type: DATA_ENTRY.TENANT,
              },
            ]}
          />
        </div>
        <br />
        <br />
        <div>
          <AdvancedSearch
            dataSource={[
              {
                dataIndex: 'tenantDepartment',
                type: DATA_ENTRY.TENANTDEPARTMENT,
              },
            ]}
          />
        </div>
        <FirstHeaderC title='测试占位' topHeight={true} />
        <SecondHeaderC title='占1位' />
        <AdvancedSearch dataSource={[{ dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT }]} />
        <SecondHeaderC title='占2位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <SecondHeaderC title='占3位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id3', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <SecondHeaderC title='占4位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id3', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id4', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <FirstHeaderC title='测试占位2格的情况' topHeight={true} />
        <SecondHeaderC title='第1位' />
        <AdvancedSearch
          dataSource={[
            { dataIndex: ['product1', 'group1'], type: DATA_ENTRY.PRODUCTGROUPSEP },
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <SecondHeaderC title='第2位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: ['product1', 'group1'], type: DATA_ENTRY.PRODUCTGROUPSEP },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <SecondHeaderC title='第3位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: ['product1', 'group1'], type: DATA_ENTRY.PRODUCTGROUPSEP },
          ]}
        />
        <SecondHeaderC title='第4位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id3', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: ['product1', 'group1'], type: DATA_ENTRY.PRODUCTGROUPSEP },
          ]}
        />
        <SecondHeaderC title='多个占两位' topHeight={true} />
        <AdvancedSearch
          dataSource={[
            { dataIndex: ['product1', 'group1'], type: DATA_ENTRY.PRODUCTGROUPSEP },
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id3', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: ['product2', 'group2'], type: DATA_ENTRY.PRODUCTGROUPSEP },
          ]}
        />
        <AdvancedSearch
          dataSource={[
            { dataIndex: 'id1', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },

            {
              dataIndex: ['startDate', 'endDate'],
              title: '日期',
              type: DATA_ENTRY.RANGEDATE,
              disableFuture: false,
            },
            { dataIndex: 'id2', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
            { dataIndex: 'id3', title: 'xxxxxxxx', type: DATA_ENTRY.INPUT },
          ]}
        />
        <FirstHeaderC title='根据查询栏宽设置显示列数需要传递parentId字段， 值唯一' topHeight={true} />
        <div style={{ width: 900 }}>
          <SecondHeaderC title='小于等于900' topHeight={true} />
          <AdvancedSearch
            parentId={'one1'}
            dataSource={[
              {
                dataIndex: 'portfolioId',
                title: '组合名称',
                type: DATA_ENTRY.SELECT,
                // dataSource: this.state.selInit1,
              },
              {
                dataIndex: 'shortName',
                title: '交易对手短名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: ['endDate', 'beginDate'],
                title: '日期区间',
                type: DATA_ENTRY.RANGEDATE,
                initialValue: [moment().subtract(1, 'year'), moment().subtract(5, 'day')],
                hasDataED: moment().subtract(1, 'day'),
                onRef: (ref) => {
                  this.RANGEDATE = ref;
                },
              },
              {
                dataIndex: 'status',
                title: '可以用状态',
                type: DATA_ENTRY.SELECT,
                isMultiple: true,
                // dataSource: this.state.selInit2,
              },
              {
                dataIndex: 'trueFalse',
                title: '是否组件',
                type: DATA_ENTRY.SELECT,
                isTrueFalseJudge: true,
              },
            ]}
          />
        </div>
        <SecondHeaderC title='大于900小于1920' topHeight={true} />
        <div style={{ width: 1400 }}>
          <AdvancedSearch
            parentId={'two2'}
            dataSource={[
              {
                dataIndex: 'portfolioId',
                title: '组合名称',
                type: DATA_ENTRY.SELECT,
                // dataSource: this.state.selInit1,
              },
              {
                dataIndex: ['endDate', 'beginDate'],
                title: '日期区间',
                type: DATA_ENTRY.RANGEDATE,
                initialValue: [moment().subtract(1, 'year'), moment().subtract(5, 'day')],
                hasDataED: moment().subtract(1, 'day'),
                onRef: (ref) => {
                  this.RANGEDATE = ref;
                },
              },
              {
                dataIndex: 'longName',
                title: '交易对手长名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'status',
                title: '可以用状态',
                type: DATA_ENTRY.SELECT,
                isMultiple: true,
                // dataSource: this.state.selInit2,
              },
              {
                dataIndex: 'trueFalse',
                title: '是否组件',
                type: DATA_ENTRY.SELECT,
                isTrueFalseJudge: true,
              },
            ]}
          />
        </div>
        <SecondHeaderC title='大于1920' topHeight={true} />
        <div style={{ width: 1921 }}>
          <AdvancedSearch
            parentId={'three3'}
            dataSource={[
              {
                dataIndex: 'portfolioId',
                title: '组合名称',
                type: DATA_ENTRY.SELECT,
                // dataSource: this.state.selInit1,
              },
              {
                dataIndex: ['endDate', 'beginDate'],
                title: '日期区间',
                type: DATA_ENTRY.RANGEDATE,
                initialValue: [moment().subtract(1, 'year'), moment().subtract(5, 'day')],
                hasDataED: moment().subtract(1, 'day'),
                onRef: (ref) => {
                  this.RANGEDATE = ref;
                },
              },
              {
                dataIndex: 'longName',
                title: '交易对手长名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'status',
                title: '可以用状态',
                type: DATA_ENTRY.SELECT,
                isMultiple: true,
                // dataSource: this.state.selInit2,
              },
              {
                dataIndex: 'trueFalse',
                title: '是否组件',
                type: DATA_ENTRY.SELECT,
                isTrueFalseJudge: true,
              },
            ]}
          />
        </div>
        <div>自适应</div>
        <div>
          <AdvancedSearch
            parentId={'four4'}
            dataSource={[
              {
                dataIndex: 'portfolioId',
                title: '组合名称',
                type: DATA_ENTRY.SELECT,
                // dataSource: this.state.selInit1,
              },
              {
                dataIndex: 'shortName',
                title: '交易对手短名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'longName',
                title: '交易对手长名',
                type: DATA_ENTRY.INPUT,
              },
              {
                dataIndex: 'status',
                title: '可以用状态',
                type: DATA_ENTRY.SELECT,
                isMultiple: true,
                // dataSource: this.state.selInit2,
              },
              {
                dataIndex: 'trueFalse',
                title: '是否组件',
                type: DATA_ENTRY.SELECT,
                isTrueFalseJudge: true,
              },
            ]}
          />
        </div>
      </div>
    );
  }
}

export default AdvanceSearchDemo;
